<template>
  <view class="cart" v-if="cart.length">
    <!-- 收货地址 -->
    <my-address></my-address>
    <!-- 商品列表 -->
    <view class="list">
      <!-- 标题区域 -->
      <view class="title">
        <uni-icons type="shop" size="20"></uni-icons>购物车{{total}}
      </view>
      <uni-swipe-action>
        <uni-swipe-action-item @click="delEvent(item.goods_id)" :right-options="options" v-for="(item,index) in cart"
          :key="item.goods_id">
          <my-goods @changeStatus="changeStatus" :isShow="true" :item="item"></my-goods>
        </uni-swipe-action-item>
      </uni-swipe-action>

    </view>
    <!-- 结算区域 -->
    <!-- 全选 -->
    <!-- 合计 -->
    <!-- 结算 -->
    <my-total></my-total>
  </view>
  <view class="nodata" v-else>
    <image src="../../static/images/cart_empty@2x.png" mode=""></image>
    <view class="word">
      空空如也~
    </view>
  </view>
</template>

<script>
  /*
  mixin:混入
  作用：封装抽离一个组件的js部分（data,watch,computed,methods.....）
  使用：
      全局混入 :所有的组件都可使用该混入的js部分
         导入
         main.js  Vue.mixin(导入的混入js)
      局部混入：当前组件可使用混入的js部分
         导入
         mixins:[导入的混入js]
  注意点：如果当前组件与混入组件命名冲突，以当前组件为主
  
  */
  import {
    mapState,
    mapGetters
  } from 'vuex'
  import mixinjs from '@/mixins/index.js'
  export default {
    mixins: [mixinjs],
    data() {
      return {
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#c00000'
          }
        }]
      };
    },
    computed: {
      ...mapState('cart', ['cart']),
      ...mapGetters('cart', ['total']),
    },
    methods: {
      // 更改状态
      changeStatus(id) {
        // console.log('changeStatus');
        this.$store.commit('cart/setStatus', id)
      },
      // 删除点击
      async delEvent(id) {
        // 确定框
        const res = await uni.showModal({
          title: "温馨提示",
          content: '您确定删除该商品吗?'
        })
        // console.log(res);
        if (res.confirm) {
          this.$store.commit('cart/delGoods', id)
        }
      }
    }
  }
</script>

<style lang="scss">
  .cart {
    padding-bottom: 90rpx;

    .list {
      .title {
        padding: 20rpx;
        border-bottom: 1px solid #eff0ef;
      }
    }
  }

  .nodata {
    margin-top: 100px;
    text-align: center;

    image {
      width: 200rpx;
      height: 200rpx;
    }

    .word {
      font-size: 12px;
      color: #80809c;
      margin-top: 20rpx
    }
  }
</style>